import React, { useEffect, useState } from "react";
import * as echarts from 'echarts';
import '../../css/home.scss'
const Examplis=()=>{
    var myChart
    const [option,setOption]=useState({
        title: {
          text: '访客记录变化图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['近七天总数', '近七天外来人员', '近七天来访老师', '近七天来访学生']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 25,
            axisLabel: {
              formatter: '{value}'
            }
        },
        series: [
          {
            name: '近七天总数',
            type: 'line',
            stack: 'Total',
            data: [12, 13, 1, 20, 1, 20, 10]
          },
          {
            name: '近七天外来人员',
            type: 'line',
            stack: 'Total',
            data: [2, 1, 1, 4, 5, 3, 4]
          },
          {
            name: '近七天来访老师',
            type: 'line',
            stack: 'Total',
            data: [5, 2, 1, 4, 9, 7, 4]
          },
          {
            name: '近七天来访学生',
            type: 'line',
            stack: 'Total',
            data: [3, 8, 6, 7, 9, 1, 8]
          }
        ]
      })
    useEffect(()=>{
        myChart  = echarts.init(document.getElementById('main'));
        myChart.setOption(option)
    })
    return (
        <div id="main" children className="examples"></div>
    )
}
export default Examplis